import { onMounted, onUnmounted, ref } from "vue";
import { Grid, Question } from "@/api/statistics";
import Car from "@iconify-icons/ri/car-fill";
import CarNow from "@iconify-icons/ri/car-washing-fill";
import Money from "@iconify-icons/ri/money-cny-circle-line";
import Parking from "@iconify-icons/ri/parking-box-line";

export function statisticsConfig() {
  /** 今日在场车辆 当前在场车辆 今日流水金额 今日活跃车场  */
  const chartData = ref([
    {
      icon: Car,
      bgColor: "#effaff",
      color: "#41b6ff",
      duration: 1,
      name: "今日在场车辆",
      value: 0,
      data: [] // 平滑折线图数据
    },
    {
      icon: CarNow,
      bgColor: "#fff5f4",
      color: "#e85f33",
      duration: 1,
      name: "当前在场车辆",
      value: 0,
      data: []
    },
    {
      icon: Money,
      bgColor: "#eff8f4",
      color: "#26ce83",
      duration: 1,
      name: "今日流水金额",
      value: 0,
      data: []
    },
    {
      icon: Parking,
      bgColor: "#f6f4fe",
      color: "#7846e5",
      duration: 1,
      name: "今日活跃车场",
      value: 0,
      data: []
    }
  ]);

  //问题列表
  const questionData = ref([]);

  async function grid() {
    const { data } = await Grid();

    //今日在场
    chartData.value[0].value = data.today_in_park;
    chartData.value[0].data = data.section_in_park;

    //今日流水
    chartData.value[2].value = data.today_flowing_water;
    chartData.value[2].data = data.section_flowing_water;

    //当前在场
    chartData.value[1].value = data.now_in_park;

    //今日活跃停车场
    chartData.value[3].value = data.today_park;
  }

  async function quesiton() {
    const { data } = await Question();
    questionData.value = data;
  }

  // 用来存储setInterval的ID
  let intervalId = null;

  //页面加载
  onMounted(() => {
    grid();
    quesiton();

    intervalId = setInterval(() => quesiton(), 60 * 1000);
  });

  //组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(intervalId);
  });

  return {
    chartData,
    questionData
  };
}
